import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { BMapService } from '../../../../../shared/service/bmap.service';

declare const BMap;

@Component({
  selector: 'app-marker',
  templateUrl: './marker.component.html',
  styleUrls: ['./marker.component.scss']
})
export class MarkerComponent implements OnInit {

  // 属性表单
  attrForm = this.fb.group({
    enableDragging: [false],
    rotation: [''],
    title: ['']
  });

  // 事件列表
  eventList = [
    {label: '点击click事件', value: 'click'},
    {label: '双击dblclick事件', value: 'dblclick'},
    {label: '鼠标按下mousedown事件', value: 'mousedown'},
    {label: '鼠标弹起mouseup事件', value: 'mouseup'},
    {label: '鼠标离开mouseout事件', value: 'mouseout'},
    {label: '鼠标进入mouseover事件', value: 'mouseover'},
    {label: '移除remove事件', value: 'remove'},
    {label: '拖拽开始dragstart事件', value: 'dragstart'},
    {label: '拖拽过程dragging事件', value: 'dragging'},
    {label: '拖拽结束dragend事件', value: 'dragend'}
  ];
  eventCheckedList = [];      // 事件选中列表

  // 方法列表
  methodList = [
    {label: '获取标注标题', value: 'getTitle'},
    {label: '获取标注文本', value: 'getLabel'},
    {label: '获取标注坐标', value: 'getPosition'},
    {label: '获取标注旋转角度', value: 'getPosition'},
    {label: '开启拖拽功能', value: 'enableDragging'},
    {label: '关闭拖拽功能', value: 'disableDragging'},
    {label: '打开信息窗', value: 'openInfoWindow'},
    {label: '关闭信息窗', value: 'closeInfoWindow'}
  ];

  constructor(
    private fb: FormBuilder,
    private bMapService: BMapService
  ) { }

  ngOnInit() {
    setTimeout(() => {
      this.initInstance();
    }, 100);
  }

  /**
   * 点击设置属性按钮
   * @param mapId(string) ：地图dom元素的id属性
   */
  submitAttrForm() {
    this.initInstance(this.attrForm.value);
  }

  /**
   * 标注marker初始化
   * @param propertyOptions(object) ：属性参数
   */
  initInstance(propertyOptions = {}) {
    const marker = new BMap.Marker(this.bMapService.centerPoint, propertyOptions);
    this.bMapService.addOverlay(marker);
  }

  /**
   * 监听事件选项变化
   * @param value(string[]) ：事件多选框选中的值
   */
  handleEventChange(value: string[]): void {
    this.eventCheckedList = value;
  }

  /**
   * 点击绑定事件按钮
   */
  handleEventsBind() {
    this.bMapService.bindEvents(this.eventCheckedList);
  }

  /**
   * 点击方法按钮
   */
  handleMethodTrigger(methodName) {
    console.log(methodName);
    this.bMapService.overlayInstance[methodName]();
  }
}
